<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <!--引入bootstrap和jQuery以及该html对应的css和js文件-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
    <script src="/js/home.js" ></script>
    <link href="/css/home.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
    <link rel="stylesheet" href="../plugIn/split-slick-slideshow/css/style.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
    <script src="../plugIn/split-slick-slideshow/js/index.js"></script>
</head>
<!--padding-top: 210px; background-image:url(../img/background4.jpg);background-size: cover;background-repeat: no-repeat;background-attachment: fixed"-->
<body style="overflow-y: auto;padding-top: 210px;">

<!--导航栏-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="z-index: 99999">
    <div class="container" >
        <!--注册和登录按钮-->
        <ul class="nav navbar-nav navbar-right " id="logAcount" >
            <li><a href="/html/signIn.html"><span class="glyphicon glyphicon-user"></span> REGISTER</a></li>
            <li><a href="/html/login.html"><span class="glyphicon glyphicon-log-in"></span> SIGN IN</a></li>
        </ul>
        <!---->
        <!--当页面宽度变小后，导航栏收拢变成三条小杠，点击可以打开导航栏-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/html/home.html"><img src="../img/coding.png" alt="" style="width: 210px; height: 40px;margin-top: -9px"></a>
        </div>
        <!---->
        <!--导航栏上的选项-->
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">

                <li ><a href="/html/home.html">ALL JOBS</a></li>
                <li><a href="/html/postJob.html">POST A JOB</a></li>
                <li><a href="/html/myPost.html">MY POST</a></li>
                <li><a href="/html/accountDetail.html">ACCOUNT</a></li>
            </ul>
        </div>
        <!---->
    </div>
</nav>
<!---->
<nav class="navbar  navbar-fixed-top" role="navigation" style="margin-top: 20px!important;">
    <div class="container" style="width: 100%;height: 50px"></div>
<div  style="width: 100%;height: 160px;background-color: #209b60;margin-top: -20px ;padding: 40px">
    <div class="container">
        <div class="col-sm-1" >
            <h1 style="color: white">JOB</h1>
        </div>
        <div class="col-sm-5" >
            <!--搜索框-->
            <div class="input-group input-login" style="margin-top: 16px">
                <input type="text" class="form-control input-login" placeholder="Search Position" id="homeSearch">
                <span class="input-group-addon input-group-addon-icon" ><a id="homeSearchBtn"><span class="glyphicon glyphicon-search glyphicon-icon" ></span></a></span>
            </div>
            <!---->
        </div>
        <div class="col-sm-6 text-right"  >
            <ol class="breadcrumb" >
                <li>
                    <a href="/html/home.html" >Home</a>
                </li>
                <li style="color: white">Jobs</li>
            </ol>
        </div>
    </div>
</div>
</nav>
<!--搜索框-->
<div class="container">
    <!--&lt;!&ndash;搜索框&ndash;&gt;-->
    <!--<div class="input-group input-login">-->
        <!--<input type="text" class="form-control input-login" placeholder="Search Position" id="homeSearch">-->
        <!--<span class="input-group-addon input-group-addon-icon" ><a id="homeSearchBtn"><span class="glyphicon glyphicon-search glyphicon-icon" ></span></a></span>-->
    <!--</div>-->
    <!--&lt;!&ndash;&ndash;&gt;-->
    <br>
    <div class="col-sm-6" >
        <!--character筛选框-->
        <select class="selectpicker show-tick" id="characters" >
            <option>No Select</option>
            <option id="volunteer">Volunteer</option>
            <option id="permanent">Permanent</option>
            <option id="freelance">Freelance</option>
            <option id="contract">Contract</option>
        </select>
        <!---->
    </div>
    <div class="col-sm-6" >
        <!--position筛选框-->
        <select class="selectpicker show-tick" id="positions">
            <option id="development">No Select</option>
            <option>development</option>
            <option>designer</option>
            <option>marketing</option>
            <option>productManager</option>
        </select>
        <!---->
    </div>


</div>

<br>

<!--position内容按钮-->
<!--主页效果-->
<div class="split-slideshow" id="slide">
    <div class="slideshow">
        <div class="slider">
            <div class="item">
                <img src="../img/background3.jpg" width="150%" height="150%"!important/>
            </div>
            <div class="item">
                <img src="../img/background4.jpg"  width="150%" height="150%"!important/>
            </div>
        </div>
    </div>
    <div class="slideshow-text">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
<!--主页效果结束-->
<div class="container" id="show">

    <div id="showPositions" style="margin-top: 80px"></div>
</div>
<!---->
<!--分页按钮-->
<div class="container" id="pagebtn" style="text-align: center">

</div>
<!---->
<!--页脚-->
<div id="footer">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col" id="col1">
            <div id="rc1">
                <h1 class="h">COURSES</h1>
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

            </div>
        </div>
        <div class="col-xs-6 col-sm-3 col" id="col2">
            <div id="rc2">
                <h1 class="h">QUICK LINKS</h1>
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p class="p1"><span class="glyphicon glyphicon-play"></span>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

            </div>
        </div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-3 col" id="col3">
            <h1>RECENT POST</h1>
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
            <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
            <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
            <p><img src="../img/footer.png" height="30" width="70"/>
                <a href="http://www.codingirls.club/how_club_works#" class="a1">Post title goes here</a></p>
            <p>2 days ago</p>
        </div>
        <div class="col-xs-6 col-sm-3 col" id="col4">
            <h1>CONTACT US</h1>
            <p class="fa fa-wechat"></p>
            <p><span class="a2">微信客服：</span> <span class="a3">codingirls</span></p>
            <p class="a1">Monday - Friday - 9:Am to 5 Pm</p>
            <p class="a1">Questions: info@codingirls.club</p>
            <a href=""></a>
        </div>
    </div>
</div>
<div id="info">
    <div id="info1">© Coding Girls Club Copyright 2016 - 2017. All Right Reserved.</div>
</div>
<!---->

</body>
</html>